<!DOCTYPE html> 
<html> 
	<head> 
	<title>OpenOffice.org</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.css" />
	<link rel="stylesheet" href="mobile.css" />
	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
	<script src="jquery/jquery-1.7.1.min.js"></script>
	<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
	<script src="jquery/jquery.ui.map.full.min.js" type="text/javascript"></script>
	<script src="swipe.js" type="text/javascript"></script>
</head> 
<body> 

<!--  page overview -->
<div data-role="page" id="overview" data-theme="p">
	<div data-role="header" data-theme="p">
		<a href="index.html#info" rel="external" data-icon="info" data-iconpos="notext" ></a>
      <h1>Overview</h1>
      <a href="#writer" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="overview"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/0401C60BE16438F5?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".overview");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page writer -->
<div data-role="page" id="writer" data-theme="p">
	<div data-role="header" data-theme="p">
		<a href="#overview" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
      <h1>Writer</h1>
      <a href="#calc" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="writer"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/87E9BE3AB4A2B957?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
             list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".writer");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page calc -->
<div data-role="page" id="calc" data-theme="p">
	<div data-role="header" data-theme="p">
		<a href="#writer" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
      <h1>Calc</h1>
      <a href="#impress" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="calc"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/E026162FEB61C313?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".calc");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page impress -->
<div data-role="page" id="impress" data-theme="p">
	<div data-role="header" data-theme="p">
      <a href="#calc" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
		<h1>Impress</h1>
      <a href="#base" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="impress"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/AD5557164669F31F?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".impress");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page base -->
<div data-role="page" id="base" data-theme="p">
	<div data-role="header" data-theme="p">
      <a href="#impress" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
		<h1>Base</h1>
      <a href="#math" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="base"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/A940CE74BC571821?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".base");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page math -->
<div data-role="page" id="math" data-theme="p">
	<div data-role="header" data-theme="p">
      <a href="#base" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
		<h1>Math</h1>
      <a href="#draw" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="math"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/F64D0F8F6C971927?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".math");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page draw -->
<div data-role="page" id="draw" data-theme="p">
	<div data-role="header" data-theme="p">
      <a href="#math" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
		<h1>Draw</h1>
      <a href="#marcro" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="draw"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/1BBC0D042C208D5A?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
            list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".draw");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<!--  page marcro -->
<div data-role="page" id="marcro" data-theme="p">
	<div data-role="header" data-theme="p">
      <a href="#draw" rel="external" data-icon="arrow-l" data-iconpos="notext" ></a>
		<h1>Marcro</h1>
       <a href="#overview" rel="external" data-icon="arrow-r" data-iconpos="notext" ></a>
	</div><!-- /header -->
	<div data-role="content">
		<ul class="marcro"></ul>
		<script type="text/javascript">
			var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/64FD4D8999FAF355?v=2&alt=json&callback=?';
			var videoURL= 'http://www.youtube.com/watch?v=';
			$.getJSON(playListURL, function(data) {
			    var list_data="";
			    $.each(data.feed.entry, function(i, item) {
				var feedTitle = item.title.$t;
				var feedURL = item.link[1].href;
				var fragments = feedURL.split("/");
				var videoID = fragments[fragments.length - 2];
				var url = videoURL + videoID;
				var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
				/*list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';*/
              list_data += '<li><a href="vnd.youtube:'+ videoID +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"></a><br>'+feedTitle+'</li>';
			    });
			    $(list_data).appendTo(".marcro");
			});
		</script>
	</div><!-- /content -->
 </div><!-- /page -->

<div data-role="dialog" id="info" >
	<div data-role="header" data-theme="p">
		<h1>Info</a>
	</div><!-- /header -->
	<div data-role="content" style="text-align:center;">
		<img src="icon/OOo_Application_128x128.png">
		<p>OpenOffice.org video tutorial supported by Software Industry Promotion Agency (Public Organization). a.k.a SIPA. You can find more tutorial in <b>sipaopensource</b> youtube channel.</p>
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

